<div>
    <h2>
        <span jhiTranslate="gateway.title">Gateway</span>
        <button class="btn btn-primary float-xs-right" (click)="refresh()" (disabled)="updatingRoutes">
            <span class="fa fa-refresh"></span> <span jhiTranslate="gateway.refresh.button">Refresh</span>
        </button>
    </h2>
    <h3 jhiTranslate="gateway.routes.title">Current routes</h3>
    <div class="table-responsive">
        <table class="table table-striped">
            <thead>
            <tr>
                <th jhiTranslate="gateway.routes.url">URL</th>
                <th jhiTranslate="gateway.routes.service">Service</th>
                <th jhiTranslate="gateway.routes.servers">Available servers</th>
            </tr>
            </thead>
            <tbody>
                <tr *ngFor="let route of gatewayRoutes">
                    <td>{{route.path}}</td>
                    <td>{{route.serviceId}}</td>
                    <td>
                        <div *ngIf="route.serviceInstances.length == 0" class="label label-danger" jhiTranslate="gateway.routes.error">
                            Warning: no server available!
                        </div>
                        <div class="table-responsive">
                            <table class="table table-striped" *ngIf="route !== null">
                                <tr *ngFor="let instance of route.serviceInstances">
                                    <td>{{instance.host}}:{{instance.port}}</td>
                                    <td *ngIf="instance.instanceInfo.status === 'UP'"><div class="tag tag-success">{{instance.instanceInfo.status}}</div></td>
                                    <td *ngIf="!instance.instanceInfo.status === 'UP'"><div class="tag tag-danger">{{instance.instanceInfo.status}}</div></td>
                                </tr>
                            </table>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
